<template>
	<view class="mx-recom-course">
		<MxBlockTitle title="推荐课程" @to="toAllCourses" />
		<view class="course-list">
			<MxRecomCourseItem v-for="course in list" :key="course.course_id" class="cmp-course-item" :id="course.course_id" :img="course.image.file_path" :name="course.name" :classLessons="course.lessons"  :amount="course.price" />
		</view>
	</view>
</template>

<script>
	import MxBlockTitle from '@/components/index/MxBlockTitle.vue'
	import MxRecomCourseItem from '@/components/index/MxRecomCourseItem.vue';
	
	export default {
		name:"MxRecomCourse",
		components: {
			MxBlockTitle,
			MxRecomCourseItem
		},
		props: {
			list: {
				type: Array,
				default: function () {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		
		methods: {
			toAllCourses() {
				uni.redirectTo({
					url: '/pages/course/course'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.mx-recom-course{
	box-sizing: border-box;
	margin-bottom: 20rpx;
	padding: 44rpx 28rpx;
	width: 100%;
	background-color: #fff;
	
	.course-list{
		padding-top: 18rpx;
		
		.cmp-course-item{
			margin-bottom: 28rpx;
		}
	}
}
</style>
